<template>
  <view class="register" id="register">
    <view class="bgc1"></view>
    <view class="bgc2"></view>
    <view class="content-div">
      <view>请选择您的身份</view>
      <view @click="choose = 1">
        <view :style="{ color: choose == 1 ? '#11CC9D' : '' }"> 我是家长</view>
        <view :style="{ border: choose == 1 ? '1rpx solid #11CC9D' : '' }">
          <view class="point" v-show="choose == 1"> </view>
        </view>
      </view>
      <view @click="choose = 2">
        <view :style="{ color: choose == 2 ? '#11CC9D' : '' }"> 我是老师</view>
        <view :style="{ border: choose == 2 ? '1rpx solid #11CC9D' : '' }">
          <view class="point" v-show="choose == 2"> </view>
        </view>
      </view>
      <view @click="choose = 3">
        <view :style="{ color: choose == 3 ? '#11CC9D' : '' }"> 我是校长</view>
        <view :style="{ border: choose == 3 ? '1rpx solid #11CC9D' : '' }">
          <view class="point" v-show="choose == 3"> </view>
        </view>
      </view>
    </view>

    <view style="padding: 40rpx 40rpx 0 40rpx">
      <u-button type="success" @click="submit">下一步</u-button>
    </view>
    <view class="cancle">取消</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      choose: 1,
    };
  },
  methods: {
    /**
     * 更新角色
     */
    submit() {
      var form = {
        type: this.choose,
      };
      this.$u.api.updateRoleApi(form).then((res) => {
        // 修改id
        var userInfo = this.vuex_userInfo;
        userInfo.id = res.data.id;
        this.$u.vuex("vuex_userInfo", userInfo);

        var profile_status = res.data.profile_status == 2 ? true : false;

        // 是否已经完成 用户信息填写
        if (profile_status) {
          if (this.choose === 1) {
            // 选择家长提示 绑定孩子信息
            uni.navigateTo({
              url: "/pages/bindBaby/bindBaby",
            });
          } else if (this.choose === 2) {
            //老师
            this.$u.route({
              url: "/pages/Authent/authent",
              params: {
                name: "老师",
                type: this.choose,
              },
            });
          } else {
            // 校长
            this.$u.route({
              url: "/pages/Authent/authent",
              params: {
                name: "校长",
                type: this.choose,
              },
            });
          }
        } else if (this.choose === 3 && res.data.is_check === 0) {
          this.$u.route({
            url: "/pages/status/status",
            params: {
              img: "wait.png",
              title: "审核中...",
              text:
                "您的身份认证已提交，正在等待后台审核。 如有疑问，请联系客服：15882088710",
            },
          });
        } else if (this.choose === 2 && res.data.is_check === 0) {
          this.$u.route({
            url: "/pages/status/status",
            params: {
              img: "wait.png",
              title: "审核中...",
              text:
                "您的身份认证已提交，正在等待您所在园区校长审核,如有疑问，请联系客服：15882088710",
            },
          });
        } else {
          var userInfo = this.vuex_userInfo;
          userInfo.type = this.choose;
          this.$u.vuex("vuex_userInfo", userInfo);
          if (this.vuex_userInfo.baby_id === 0 && this.choose === 1) {
            uni.showToast({
              title: "抱歉暂无孩子信息",
              duration: 500,
              icon: "none",
            });
          } else {
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/common/Bar?type=" + this.choose,
              });
            }, 1000);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang ='scss' >
.register {
  height: 100vh;
  background-color: #f7f7f7;
  /* padding: 0 15rpx; */
  .bgc1 {
    height: 105rpx;
    background-color: #0acc94;
  }
  .bgc2 {
    height: 50.5 * 1.5rpx;
    background-color: #0acc94;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  .content-div {
    /* position: absolute;
    top: 70rpx; */
    height: 50vh;
    margin: -60 * 2rpx 30rpx 30rpx 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    padding: 30rpx 15 * 2rpx;
    & > view {
      margin: 20rpx 0;
      &:nth-child(1) {
        font-size: 18 * 2rpx;
        color: #000000;
        font-weight: 700;
        margin-bottom: 40rpx;
      }
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4) {
        margin: 40rpx 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 110rpx;
        font-size: 36rpx;
        border: 1rpx solid #07c38f;
        border-radius: 30rpx;
        color: #999999;
        & > view:nth-child(2) {
          height: 20 * 2rpx;
          width: 20 * 2rpx;
          border-radius: 50%;
          border: 1rpx solid #dcdcdc;
          margin-left: 20rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .point {
            width: 20rpx;
            height: 20rpx;
            background-color: #11cc9d;
            border-radius: 50%;
          }
        }
        .choose {
          border: 1rpx solid #11cc9d;
        }
      }
    }
  }
  .cancle {
    color: #07c38f;
    font-size: 32rpx;
    text-align: center;
    margin-top: 30rpx;
  }
}
</style>
